import React, { Component, PropTypes } from 'react';
import axios from 'axios';
import { connect } from 'react-redux';
import store from '../../store';

class RenameFolder extends Component{

    closeFrame(e){
        store.dispatch({
            type: 'RENAME_FOLDER',
            renameFolder: false
        });
        $('.backcover').hide();
    }

    rename(e){
        var { folderList, activeFolder } = this.props; 
        var _that = this;

        var folderName = this.refs.renameInput.value;
        if(!folderName || folderName === ''){
            store.dispatch({
                type: 'RENAME_ERROR',
                renameError: '文件夹名不能为空！'
            })
            $('#rename-folder-error').show();
            return;
        }

        var _index = -1;
        var err = false;
        folderList.find((value, index, arr) => {
            if(value.name === folderName && value.name != activeFolder){
                store.dispatch({
                    type: 'RENAME_ERROR',
                    renameError: '文件夹名不能重名！'
                })
                $('#rename-folder-error').show();
                err = true;
                return;
            }
            if(value.name === activeFolder){
                _index = index;
            }
        });

        if(err)
        return;

        axios.get('/renameFolder', {
            params: {
                newName: folderName,
                oldName: activeFolder
            }
        })
        .then(function(response){

            folderList[_index].name = folderName
            store.dispatch({
                type: 'GET_FOLDER',
                folderList: [...store.getState().folderReducer.folderList]
            })

            _that.closeFrame();            
        })
        .catch(function(error){
            alert('系统出错！')
        })
    
    }

    clearnError(){
        $('#rename-folder-error').hide();
    }

    render(){

        var { renameFolder, activeFolder, renameError } = this.props;
        var classs = 'new-container hide';
        if (renameFolder) classs = 'new-container'

       return(
            <section id="rename-folder" className={classs}>
                <div  className="new-title">
                    文件夹重命名
                    <i className="icon-remove" onClick={this.closeFrame.bind(this)}></i>
                </div>
                <div>
                    原名：<span className="warn">{activeFolder}</span>
                </div>
                <div>
                    <input id="rename-folder-input" type="text" ref="renameInput" onFocus={this.clearnError.bind(this)}/>
                </div>
                <div id="rename-folder-error" className="error">{ renameError }</div>                
                <div>
                    <button type="button" className="cancle-btn" onClick={this.closeFrame.bind(this)}>取消</button>
                    <button type="button" className="delete-btn" onClick={this.rename.bind(this)}>确定</button>
                </div>
            </section>
       )
    }

}

const mapStateToProps  = (state) => {
    return {
        folderList: state.folderReducer.folderList,
        activeFolder: state.folderReducer.activeFolder,
        renameFolder: state.folderReducer.renameFolder,
        renameError: state.folderReducer.renameError
    }
}

const mapDispatchToProps = (dispatch, ownProps) => {
    return {}
}
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(RenameFolder);